<template>
  <div id="vip_manage" class="container">
    <div class="content">
      <div class="title">会员管理</div>
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-select style="width:1.5rem;" clearable v-model="searchParam.studentCardId"
             placeholder="全部会员卡">
              <el-option
                v-for="item in VipCardList"
                :key="item.studentCardId"
                :label="item.studentCardName"
                :value="item.studentCardId">
              </el-option>
            </el-select>
            <el-select v-model="searchParam.vipCardMStatus" clearable placeholder="全部状态" style="width:1.5rem;">
              <el-option label="有效" :value="1"></el-option>
              <el-option label="无效" :value="2"></el-option>
            </el-select>
            <el-input
              style="width: 3.5rem;"
              placeholder="搜索 会员名称"
              v-model="searchParam.keyword"
              clearable
              class="input_search"
            ></el-input>
            <div @click="search(1)" class="search_btn" style="margin-left:0.1rem;">搜索</div>
            <!-- <div v-if="hasApi('appVersionAdd')" class="right_btn" @click="addVersion">新&nbsp;&nbsp;增</div> -->
          </div>
        </div>

        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 4rem;">序号</td>
                <td style="width: 4rem;">会员名称</td>
                <td style="width: 4rem;">联系电话</td>
                <td style="width: 4rem;">充值次数</td>
                <td style="width: 4rem;">最近一次充值</td>
                <td style="width: 4rem;">会员截止日期</td>
                <td style="width: 2rem;">约课次数</td>
                <td style="width: 4rem;">状态</td>
                <td style="width: 4rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody" v-if="vipList&&vipList.length>0">
              <tr v-for="(item,index) in vipList" :key="index">
                <td>{{index+1+(searchParam.currPage-1)*searchParam.pageSize}}</td>
                <td v-if="item.clueEntity">{{item.clueEntity.realName}}</td><td v-else></td>
                <td>{{item.studentPhone}}</td>
                <td>{{item.accountNum||0}}</td>
                <td v-if="item.recentRecord">{{item.recentRecord.accountDate}}</td><td v-else></td>
                <td v-if="item.recentRecord">{{item.recentRecord.effectiveDateEnd.substr(0,10)}}</td><td v-else></td>
                <td>{{item.syllabusNum||0}}</td>
                <td>{{item.canCount>0?'有效':'无效'}}</td>
                <td>
                  <el-button type="text" style="font-size:0.16rem;" @click="studentDetail(item)">详情</el-button>
                </td>
              </tr>
            </tbody>
            <tbody class="tbody" v-else>
              <tr>
                <td colspan="9" align="center">本校区还没有会员</td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="searchParam.currPage"
          @size-change="pageSizeChange"
          @current-change="curPageChange"
          :total="pagination.total"
        ></el-pagination>
      </div>
    </div>
    <!-- 会员信息 -->
		<el-dialog class="vipdetailPopup" :title="'会员信息'" :visible.sync="vipdetailPopupVisible"
			:close-on-click-modal="false">
			<vipdetail ref="vipdetail" @cancel="vipdetailPopupVisible=false;" ></vipdetail>
		</el-dialog>
  </div>
</template>

<script>
import vipdetail from './common/vip_detail'
import getVipCardEndDate from '@keer/js/vip_manage/vip_card_date.js'
let vm;
export default {
  components:{vipdetail},
  data() {
    return {
      formLabelWidth:'120px',
      vipdetailPopupVisible:false,
      searchParam:{
        campusId:this.$store.state.campusId,
        vipCardMStatus:'',
        studentCardId:'',
        keyword:'',
        currPage:1,
        pageSize:10,
      },
      pagination:{
        total:0,
      },
      vipList:[],
      VipCardList:[],
    };
  },
  watch: {},
  methods: {
    init() {
      this.search(1);
      this.getVipCardList();
    },
    campusChange : function(campusId) { //校区改变
      this.searchParam.campusId=campusId;
      this.init();
    },
    /**搜索 */
    search(pageIndex){
      this.searchParam.currPage=pageIndex||this.searchParam.currPage;
      
      api.vipQueryList(this.searchParam).then(function(data){
        if(data.resultCode==2000){
          vm.vipList=data.list;
          vm.pagination.total=data.totalCount;
        }
      });

    },
    pageSizeChange: function(val) {
      this.searchParam.pageSize = val;
      this.search(1);
    },
    /**表格显示形式翻页 */
    curPageChange(val) {
      this.search(val);
    },
    studentDetail(student){
      if(!student.recentRecord){
        this.$message({
          type:'warning',
          message:'最近充值记录为空！'
        });
        return;
      }
      this.vipdetailPopupVisible=true;
      this.$nextTick(()=>{
        let param={
          clueId:student.clueId,
          studentInfo:{
            name:student.clueEntity.realName,
            gender:student.clueEntity.gender,
            phone:student.studentPhone,
            vipCardNo:student.recentRecord.vipCardNo,
            photo:student.studentPhoto
          },
        };
        vm.$refs['vipdetail'].init(param);
      });
      
    },
    /**获取会员卡列表 */
    getVipCardList(){
      api.vipCardList({
        campusId:this.$store.state.campusId
      }).then(function(data){
        if(data.resultCode==2000){
          vm.VipCardList=data.list;
        }
      });
    },
  },
  mounted() {
    vm = this;
    
    this.init();
  },
  computed: {}
};
</script>
<style lang="scss">
#vip_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .el-form-item__label{
    font-size: 0.16rem;
  }
  .el-dialog__header{
    text-align: left;
  }
  .el-dialog__title{
    font-size: 0.25rem;
  }
  .vipdetailPopup{
    .el-dialog{
      width: 12rem;
    }
  }
  
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(~@/assets/img/clue_manage/add_white.png);
  width: 1.54rem;
}
</style>